<script setup>
import dataSourceApi from "@/api/datasource/dataSourceApi";
import DatabaseTree from "@/views/datasource/databaseTree.vue";
import DatabaseMeta from "@/views/datasource/databaseMeta.vue";

const dataSourceList = ref([])
const dataSourceId = ref()

const queryList = async () => {
	const data = await dataSourceApi.queryList()
	// console.log(data);
	// this.$set(this, "tableData", data);
	dataSourceList.value = data
}

const selectItem = ref({});
const selectChange = (item) => {
	selectItem.value = item;
}

onMounted(() => {
	queryList();
})

</script>

<template>

	<a-row :gutter="10" class="mb-2">
		<a-col :span="6">
			<a-card :bordered="false">
				<a-form  ref="formRef" autocomplete="off">
					<a-form-item>
						<a-select v-model:value="dataSourceId" class="m-2" clearable filterable>
							<a-select-option v-for="item in dataSourceList" :value="item.id" :key="item.id"
								label="item.datasourceName" />
						</a-select>
					</a-form-item>
				</a-form>
				<div style="height:calc(70vh);overflow:scroll;">
					<DatabaseTree :editor="true" :dataSourceId="dataSourceId" :selectChange="selectChange" />
				</div>
			</a-card>
		</a-col>
		<a-col :span="18">
			<DatabaseMeta :dataSourceId="dataSourceId" :selectItem="selectItem" />
		</a-col>
	</a-row>


</template>

<style scoped></style>
